<template>
  <div style="display: flex; height: 100%;" v-loading="loading">
    <div style="width: 60%;">
      <img src="/static/img/login-bg.png" style="width: 100%; height: 100%;">
    </div>
    <div class="login-container">
      <h2 style="margin-bottom: 20px; color: #aec86a;">登录</h2>
      <el-form ref="formBox" :model="form" style="width: 60%;">
       <el-form-item label="" prop="username">
          <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
       <el-form-item prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: space-between; width: 100%;">
            <el-checkbox v-model="rememberPsw" label="记住密码"></el-checkbox>
            <a href="#" style="color: #66abec;">忘记密码</a>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="submit" type="primary" style="width: 100%;">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="copyright">
        <div>成都顺点科技有限公司</div>
        <div>Chengdu Shundian Technology Co.,Ltd</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  
  import {
    inject,
    reactive,
    onMounted,
    ref,
    getCurrentInstance
  } from 'vue'
  
  import md5 from '@/utils/md5.js'
  
  import permissions from '/src/utils/permission.js'
  
  const {
    ctx
  } = getCurrentInstance();
  const $post = inject('$post');
  const $router = inject('$router');
  const $store = inject('$store');
  
  const loading = ref(false);
  
  const form = reactive({
    username: 'super',
    password: '666666'
  });
  
  // 是否记住密码
  const rememberPsw = ref(false);
  
  // 判断是否有记住密码
  let userInfo = localStorage.getItem('userInfo');
  if (userInfo) {
    try {
      userInfo = JSON.parse(userInfo);
      form.username = userInfo.username;
      form.password = userInfo.password;
      rememberPsw.value = true;
    } catch (e) {}
  }
  
  const rules = reactive({
    username: [{
      required: true,
      message: '请输入登录账号',
      trigger: 'change'
    }],
    password: [{
      required: true,
      message: '请输入登录密码',
      trigger: 'change'
    }]
  })
  
  const submit = () => {
    ctx.$refs.formBox.validate(res => {
      if (!res) return;
      if (rememberPsw.value) {
        localStorage.setItem('userInfo', JSON.stringify(form));
      } else {
        localStorage.removeItem('userInfo');
      }
      loading.value = true;
      $post('/v2/base/login', {
        username: form.username,
        password: md5(form.password)
      }).then(res => {
        return $post('/v2/base/menus')
      }).then(res => {
        const user = {
          nickName: res.data.nickName,
          operationMenuList: [],
          operationRouterList: [],
          financeMenuList: [],
          financeRouterList: []
        }
        let menus = res.data.menus;
        // 菜单列表
        let operation = menus.find(item => item.key == 'A_OAM');
        if(operation && operation.children) {
          user.operationMenuList = permissions['A_OAM'].filter(item => item.isMenu && operation.children[item.id]);
        }
        let finance = menus.find(item => item.key == 'B_FINANCE');
        if(finance && finance.children) {
          user.financeMenuList = permissions['B_FINANCE'].filter(item => item.isMenu && finance.children[item.id]);
        }
        // 获取路由表
        user.operationRouterList.push(...permissions['A_OAM'].filter(item => operation.children[item.id]));
        user.financeRouterList.push(...permissions['B_FINANCE'].filter(item => finance.children[item.id]));
        console.log(user);
        $store.commit('setUser', user);
        $router.push('/');
      }).finally(_ => loading.value = false);
    })
  }
  
</script>

<style scoped="scoped" lang="scss">
  
  .login-container {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    position: relative;
    
    >.copyright {
      color: #aec86a;
      font-size: 12px;
      position: absolute;
      left: 50px;
      bottom: 20px;
    }
  }
  
  
</style>
